<%@ page language="java" contentType="text/html; charset=UTF-8" session="true"
    pageEncoding="UTF-8"%>
<%@ page import="validaciones.IndexData"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UNIDAD DE SALUD</title>
<link rel="shortcut icon" type="image/ico" href="images/sistema/u-salud-logo.ico" />
<link rel="stylesheet" href="lib/jquery1.7/themes/start/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="css/demos.css" />
<link rel="stylesheet" href="css/pagina.css" />
<link rel="stylesheet" href="css/menuaco.css" />
<script type="text/javascript" src="lib/jquery1.7/jquery-1.7.1.js"></script>
<script type="text/javascript" src="lib/jquery1.7/external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.position.js"></script>	
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.effects.core.js"></script>		
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.effects.fade.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="lib/menuaco.js"></script>


<script type="text/javascript">

$(function() {
	
	/*Variables*/
	var nominsumo=$("#nominsumo"),codigo=$("#codigo"),descripcion=$("#descripcion"),frmCrear=$("#formulario-nuevo-insumo"),
		allCrear= $([]).add(nominsumo).add(codigo).add(descripcion);
	
	$("button").button();
	$("#tab-insumo").tabs();	
	
	
	function MensajeError(tips,campo,mensaje){
		campo.addClass('ui-state-error');
		$('.'+tips).addClass('ui-state-highlight');
		$('.'+tips).html(mensaje);
	}
	
	
	function MandarNuevo(Datos){
		$.ajax({
			  url: "CNuevoInsumo",
			  data:Datos, 
			  type: 'post',
			  dataType: 'json',
			  success: function(data){
				  //todo se realizo con éxito
				  if(data.resultado=="10"){
					  	frmCrear.dialog("close");
				  		DialogoInformacionDiv('dialog-n','Datos ingresados','Datos guardados con éxito');   	
						
				  	}else{//repetido
				  		MensajeError('tipsNuevoInsumo',$("#"+data.campo),data.mensaje);
				  	}
		  	}  
			});		
						
	}
		
	/*formulario*/
	frmCrear.dialog({
		autoOpen:false,
		height: 'auto',
		width: 'auto',
		modal:true,
		closeOnEscape:true,
		buttons:{
			"Cancelar": function(){
				$(this).dialog('close');
			},
			"Guardar": function(){
				if(nominsumo.val().length<2)
					MensajeError('tipsNuevoInsumo',nominsumo,'error');	
// 				MandarNuevo(
// 					{
// 						nominsumo:nominsumo.val(),
// 						codigo:codigo.val(),
// 						descripcion:descripcion.val()
// 					}		
// 				);
				
// 				$(this).dialog('close');
			}
		}
	});
	
	
	/*Crear insumo*/
	$("#crear_insumo").click(function(){
		allCrear.val('');
		allCrear.removeClass('ui-state-error');
		$('.tipsNuevoInsumo').html('* Campos obligatorios');
		$('.tipsNuevoInsumo').removeClass('ui-state-highlight');
		frmCrear.dialog({position:'center'});
		frmCrear.dialog({show:'fade'});
		frmCrear.dialog({hide:'fade'});
		frmCrear.dialog('open');
	});
	
	
	
});

</script>
</head>
<body>	

<div id="header">

</div>
<div id="leftcol">

</div>


<div id="content">
<div id="tab-insumo">
	<ul>
		<li><a href="#PanelNuevoInsumo">NUEVO INSUMO<IMG class="imagen24" src="images/sistema/add.png"/></a></li>
		<li><a href="#PanelModificarInsumo">MODIFICAR INSUMO<IMG class="imagen24" src="images/sistema/edit.png"/></a></li>
	</ul>
	<div id="PanelNuevoInsumo">
		 
		<button id="crear_insumo">Crear Insumo</button>
		<div id="dialogo-n" title=""></div> 
		 
		<div id="formulario-nuevo-insumo" >
		<h3 style="text-align:center" class="tipsNuevoInsumo">* Campos obligatorios</h3>
		<table class="formulario">
		<tr>
			<td>*</td>
			<td class="ui-widget">Nombre:</td>
			<td class="ui-state-focus"><input id="nominsumo" size="90"/> </td>			
		</tr>

		
		<tr>
			<td></td>
			<td class="ui-widget">Código</td>
			<td class="ui-state-focus"><input id="codigo" size="40"/> </td>
		</tr>
		
		<tr>
			<td></td>
			<td class="ui-widget">Descripción:</td>
			<td class="ui-state-focus"><input id="descripcion" size="80"/> </td>			
		</tr>
		</table>
		
		</div>



			
	</div>
	<div id="PanelModificarInsumo"> 
		
	</div>
</div>
</div>
<br>
<div id="footer" >
	<p>UDS INVENTARIO VERSION 1.0 Todos los derechos reservados</p>
</div>
</body>
</html>